<template>
  <div class="viewdata">
    <div class="view-data-left">
      <div class="viewdataBox">
        <h3>面相照</h3>
        <div class="face-box">
          <div
            v-for="item in formFiles.facePicture"
            :key="item.fileType+'_'+item.fileSubType"
            class="face"
          >
            <DroppableUpload :file-url.sync="item.fileUrl" :file-item="item">{{ item.name }}</DroppableUpload>
          </div>
        </div>

      </div>
      <div class="viewdataBox intraOrailm">
        <h3>口内照</h3>
        <div class="face-box">
          <div
            v-for="item in formFiles.cavityPicture"
            :key="item.fileType+'_'+item.fileSubType"
            class="face"
          >
            <DroppableUpload :file-url.sync="item.fileUrl" :file-item="item">{{ item.name }}</DroppableUpload>
          </div>
        </div>
      </div>
      <div class="viewdataBox">
        <h3>X光照</h3>
        <div class="xIntraOrailm">
          <div>
            <SwitchCli :swit="fl" @changeSwitchCli="changeSwitchCli"></SwitchCli>
          </div>
          <div v-if="fl.flo" class="xIntraOrailmBox">
            <div
              v-for="item in formFiles.xPicture"
              :key="item.fileType+'_'+item.fileSubType"
              class="face"
            >
              <DroppableUpload :file-url.sync="item.fileUrl" :file-item="item">{{ item.name }}</DroppableUpload>
            </div>
          </div>
          <el-upload
            v-else
            class="upload-demo"
            :action="uploadUrl"
            :on-remove="handleRemove"
            :on-success="uploadSuccess"
            list-type="picture"
            :limit="1"
            accept=".jpg,.jpeg,.png,.gif,.bmp,.JPG,.JPEG,.PBG,.GIF,.BMP"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </div>
      </div>
    </div>
    <div class="viewdataBoxRight">
      <h3>批量上传</h3>
      <div class="boxRight">
        <div v-if="draggableUpload.length>0" class="RightImg">
          <DraggableUpload v-for="item in draggableUpload" :key="item.id" :item="item" class="boxRightImg"></DraggableUpload>
        </div>
        <el-upload
          class="upload-demo"
          drag
          :action="uploadUrl"
          multiple
          :file-list="draggableUpload"
          :on-success="uploadRightSuccess"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
        <!-- <div class="uploadRightImg">
          <div class="el-icon-upload"></div>
          <p>批量上传</p>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>

import DroppableUpload from './children/DroppableUpload';
import DraggableUpload from './children/DraggableUpload';

import SwitchCli from './children/SwitchCli';
export default {
  name: 'Viewdata',
  components: {
    DroppableUpload,
    DraggableUpload,
    SwitchCli
  },
  data() {
    return {
      uploadUrl: process.env.VUE_APP_LOG_API + 'api/aliOSS/uploadfile', // 上传接口
      formFiles: {
        facePicture: [
          {
            fileType: '01',
            fileSubType: '0101',
            icon: 'add-front',
            name: '正面像',
            fileUrl: ''
          },
          {
            fileType: '01',
            fileSubType: '0102',
            icon: 'add-front-smile',
            name: '正面微笑像',
            fileUrl: ''
          },
          {
            fileType: '01',
            fileSubType: '0103',
            icon: 'add-right45',
            name: '右侧45度像',
            fileUrl: ''
          },
          {
            fileType: '01',
            fileSubType: '0104',
            icon: 'add-right90',
            name: '右侧90度像',
            fileUrl: ''
          }

        ],
        cavityPicture: [
          {
            fileType: '02',
            fileSubType: '0201',
            icon: 'add-cavity-front-45right',
            name: '口内45度右侧像',
            fileUrl: ''
          },
          {
            fileType: '02',
            fileSubType: '0202',
            icon: 'add-cavity-front',
            name: '口内正面像',
            fileUrl: ''
          },
          {
            fileType: '02',
            fileSubType: '0203',
            icon: 'add-cavity-front-45left',
            name: '口内45度左侧像',
            fileUrl: ''
          },
          {
            fileType: '02',
            fileSubType: '0204',
            icon: 'add-cavity-front-90',
            name: '口内90度像',
            fileUrl: ''
          },
          {
            fileType: '02',
            fileSubType: '0205',
            icon: 'add-cavity-front-up',
            name: '口内正面上颌像',
            fileUrl: ''
          },
          {
            fileType: '02',
            fileSubType: '0206',
            icon: 'add-cavity-front-down',
            name: '口内正面下颌像',
            fileUrl: ''
          }
        ],
        xPicture: [
          {
            fileType: '03',
            fileSubType: '0301',
            icon: 'add-curved-faultage',
            name: '曲面新层片',
            fileUrl: ''
          },
          {
            fileType: '03',
            fileSubType: '0302',
            icon: 'add-head-side',
            name: '头颅侧位片',
            fileUrl: ''
          }
        ],
        cbctPicture: [
          {
            fileType: '05',
            fileSubType: '0302',
            icon: 'add-head-side',
            name: '头颅侧位片',
            fileUrl: ''
          }

        ]
      },
      fl: {
        flo: true,
        switchVal: ['X光图片', 'CBCT'],
        wid: '150px'
      },
      draggableUpload: []
      // [{ imgUrl: 'http://localhost:8013/static/img/heaPortrait.b075c1a3.png' }, { imgUrl: 'http://localhost:8013/static/img/post.ad683e1f.png' }]
    };
  },
  created() {
  },
  methods: {
    changeSwitchCli(val) {
      console.warn(val);
      const fl = this.fl;
      this.fl.flo = !val;
      this.fl.floVal = fl.switchVal[val];
    },
    // 上传----------------------
    handleRemove(file, fileList) { // 删除文件
      this.uploadDisabled = fileList.length >= this.limitCount;
    },
    // 上传成功
    uploadSuccess(response, file, fileList) {
      this.formFiles.cbctPicture[0].fileUrl = response.data.url;
    },
    // 上传成功
    uploadRightSuccess(response, file, fileList) {
      console.warn(fileList);
      fileList.map(img => {
        this.draggableUpload.push({ imgUrl: img.response.data.url });
      });
      // this.mealForm.imgUrl = response.data.url;
    }
  }
};
</script>
<style lang="scss" scoped>
.viewdata{
  padding-bottom: 70px;
  display: flex;
  .view-data-left{
    width: 820px;
    height: calc(100vh - 250px);
    overflow: hidden;
    .viewdataBox{
      width: 810px;
    }
  }
  .view-data-left:hover{
    overflow: auto;
  }
  .viewdataBoxRight{
    position: absolute;
    right: 20px;
  }
}
.viewdataBox{
  padding: 20px 0px 20px 30px;
}
.face{
  width: 180px;
  margin-right: 20px;
  margin-bottom: 20px;
  display: inline-block;
}
.boxRight{
  width: 278px;
  height: 645px;
  background: #F1F2F6;
  border: 1px solid #E6E6E6;
  opacity: 1;
  border-radius: 20px;
  padding: 10px;
}
.RightImg{
  display: flex;
}
.boxRightImg{
  width: 120px;
  height: 78px;
  background: #508FCC;
  border-radius: 10px;
  margin: 6px 4px;
  display: inline-block;
}
.intraOrailm .face:last-of-type{
  margin-right: 0px;
}
.xIntraOrailm{
  // width: 1116px;
  height: 278px;
  border: 2px dashed #CCCCCC;
  border-radius: 20px;
  .upload-demo{
    width: 250px;
    margin: auto;
    text-align: center;
  }
}
.xIntraOrailm .face:first-of-type{
  margin-right: 64px;
}
.xIntraOrailmBox{
  width: 443px;
  margin: 0 auto;
  padding: 11px 8px;
}
.viewdataBox .face:last-of-type{
  margin-right: 0px;
}
.uploadRightImg p{
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px;
  color: #508FCC;
}
.face-boxB{
  margin-top: 20px;
}
.intraOrailm .face{
  width: 220px;
  /* margin-right: 108px; */
}
.viewdata .el-icon-upload{
  margin-top: 40px;
  text-align: center;
  width: 100%;
}
.viewdata .el-icon-upload::before{
  display: inline-block;
  font-size: 70px;
  color: transparent;
  background: linear-gradient(90deg, #89ADDB 0%, #106FCD 100%);
  -webkit-background-clip: text;
}
</style>
<style lang="scss" >
.viewdata{
  .viewdataBoxRight{
    .boxRight{
      .upload-demo{
        .el-upload{
           width: 100%;
          .el-upload-dragger{
            width: 100%;
          }
        }
        .el-upload-list{
          display: none;
        }
      }
    }
  }
}

</style>
